<script setup lang="ts">
    // import type { BannerItem } from '@/types/home'
import {http} from '@/utlis/http.ts'
    import { ref } from 'vue'
    import type { BannerItem } from '@/types/home'
import {toRaw,toRefs} from 'vue'

    const activeIndex = ref(0)
    
    // 当 swiper 下标发生变化时触发
    const onChange = (ev) => {
      activeIndex.value = ev.detail.current
    }

let prop=defineProps(['img_list'])

let img_lists =prop.img_list
    // 定义 props 接收
    const Ontap=(url,urls)=>{
	let tem_urls=[]
	for(let i=0;i<urls.length;i++){
		tem_urls.push(urls[i].img)
	}
	uni.previewImage({
    current: url,
    urls: tem_urls,
  })
}
    </script>
    
    <template>
      
      <view class="carousel">
        <swiper :circular="true" style="height: 350rpx;" :autoplay="true" :interval="3000" @change="onChange">
          <swiper-item  v-for="item in img_list">
            <navigator  hover-class="none" class="navigator">
              <image mode="aspectFill" class="image" :src="item.img" @click="Ontap(item.img,img_list)"></image>
            </navigator>
          </swiper-item>
        </swiper>
        <!-- 指示点 -->
        <view class="indicator">
          <text
            v-for="(item, index) in img_list"
            :key="index"
            class="dot"
            :class="{ active: index === activeIndex }"
          ></text>
        </view>
      </view>
    </template>
    
    <style lang="scss">
    /* 轮播图 */
    .carousel {
    height: 350rpx;
    position: relative;
    overflow: hidden;
    transform: translateY(0);
    background-color: #efefef;
    .indicator {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 16rpx;
      display: flex;
      justify-content: center;
      .dot {
        width: 30rpx;
        height: 6rpx;
        margin: 0 8rpx;
        border-radius: 6rpx;
        background-color: rgba(255, 255, 255, 0.4);
      }
      .active {
        background-color: #fff;
      }
    }
    .navigator,
    .image {
      width: 100%;
      height: 100%;
    }
  }
   
    </style>
    